<template>
  <div class="ASNshouhuo">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">ASN收货管理</span>
      </div>
      <s-table
        :table="table"
        ref="table"
        @http="tableWatch">
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="可用操作"
          width="120">
          <template slot-scope="s">
            <el-button type="success" size="mini" @click="dialogConfirmOpen(s.row, '确认收货')" v-if="USER.auth.indexOf('inOperation_ASNshouhuo_confirm')!==-1 && s.row.asnzt === '0'">确认收货</el-button>
            <el-button type="success" size="mini" @click="dialogConfirmOpen(s.row, '部分收货')" v-if="USER.auth.indexOf('inOperation_ASNshouhuo_part')!==-1 && s.row.asnzt === '1'">部分收货</el-button>
            <el-button type="danger" size="mini" icon="delete" @click="dialogCancelOpen(s.row)" v-if="USER.auth.indexOf('inOperation_ASNshouhuo_cancel')!==-1 && s.row.asnzt !=='0'"></el-button>
          </template>
        </el-table-column>
        <el-form-item label="名称" prop="gysmc">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_gysmc"
                    placeholder="供应商名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="ASN编号" prop="asnbh">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_asnbh"
                    placeholder="ASN编号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="PO编号" prop="dycgdbh">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_dycgdbh"
                    placeholder="关联PO编号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="cjsj">
          <el-date-picker
            v-model="autoVue_table_cjsj"
            type="daterange"
            placeholder="选择日期范围">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="ASN状态" prop="asnzt">
          <el-select v-model="autoVue_table_asnzt"
                     placeholder="ASN状态">
            <el-option
              label="全部"
              value=""></el-option>
            <el-option
              label="初始"
              value="0"></el-option>
            <el-option
              label="部分收货"
              value="1"></el-option>
            <el-option
              label="完全收货"
              value="2"></el-option>
            <el-option
              label="订单取消"
              value="3"></el-option>
            <el-option
              label="订单完成"
              value="4"></el-option>
          </el-select>
        </el-form-item>
      </s-table>
    </el-card>

    <s-dialog :dialog="dialogConfirm" :close="dialogConfirmInit">
      <p slot="title">{{dialogConfirm.title}}</p>
      <s-table
        :table="tableConfirm"
        :multiSelect="true"
        ref="tableConfirm"
        @selectRemote="tableConfirmSelectRemote"
        @http="tableWatch">
        <el-form-item slot="multiSelect" label="多选操作" prop="multiSelect" v-if="tableConfirm.multiSelect">
          <el-row>
            <el-col :span="8">
              <el-button size="small" type="info" @click="dialogOperationOpen('tableConfirm')">操作人员</el-button>
            </el-col>
            <el-col :span="8" v-if="dialogConfirm.title == '部分收货'">
              <el-button type="success" size="small" @click="tablePrint('')">打印托盘码</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="可用操作"
          width="120">
          <template slot-scope="s">
            <el-button type="success" size="mini" @click="dialogConfirmReceiptOpen(s.row)">调整</el-button>
            <el-button type="success" size="mini" v-if="dialogConfirm.title == '部分收货'" @click="tablePrint(s.row)">打印托盘码</el-button>
          </template>
        </el-table-column>
      </s-table>
      <el-button slot="footer" @click="dialogConfirmSave">确认收货</el-button>
    </s-dialog>

    <s-dialog :dialog="dialogOperation" :close="dialogOperationInit">
      <p slot="title">生成操作人员</p>
      <s-form :form="formDialogOperation" ref="formDialogOperation">
        <el-row>
          <el-col :xs="24" :lg="{span: 23, offset: 0}">
            <el-form-item prop="mc" label="操作人员">
              <el-input
                type="text"
                v-model="formDialogOperation.mc"
                placeholder="操作人员"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </s-form>
      <el-button slot="footer" @click="dialogOperationSave">保存</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogCancel" :close="dialogCancelInit">
      <p slot="title">取消收货</p>
      <s-form :form="formDialogCancel" ref="formDialogCancel">
        <el-form-item prop="qxry" label="取消人员">
          <el-input
            type="text"
            v-model="formDialogCancel.qxry"
            placeholder="取消人员"></el-input>
        </el-form-item>
        <el-form-item prop="qxyy" label="取消原因">
          <el-input
            type="textarea"
            autosize
            v-model="formDialogCancel.qxyy"
            placeholder="取消原因"></el-input>
        </el-form-item>
      </s-form>
      <el-button slot="footer" @click="dialogCancelSave">保存</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogConfirmReceipt" :close="dialogConfirmReceiptInit">
      <p slot="title">收货调整</p>
      <s-form :form="formDialogConfirmReceipt" ref="formDialogConfirmReceipt">
        <el-row>
          <el-col :xs="24" :lg="{span: 7, offset: 0}" class="">
            <el-form-item prop="goodsBh" label="货品编号">
              <div class="s-content">{{formDialogConfirmReceipt.hpbh}}</div>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 7, offset: 1}" class="">
            <el-form-item prop="goodsMc" label="货品名称">
              <div class="s-content">{{formDialogConfirmReceipt.hpmc}}</div>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 7, offset: 1}" class="">
            <el-form-item prop="czry" label="操作人员">
              <el-input
                type="text"
                v-model="formDialogConfirmReceipt.czry"
                placeholder="操作人员"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 7, offset: 0}" class="">
            <el-form-item prop="yqsl" label="预期数量">
              <div class="s-content">{{formDialogConfirmReceipt.yqsl}}</div>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 7, offset: 1}" class="">
            <el-form-item prop="sssl" label="收货数量">
              <div class="s-content">{{formDialogConfirmReceipt.sssl}}</div>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 7, offset: 1}" class="">
            <el-form-item prop="kwid" label="收货库位">
              <el-select v-model="formDialogConfirmReceipt.kwid"
                         filterable
                         remote
                         placeholder="请选择收货库位"
                         @change="dialogChangeShkw"
                         :remote-method="dialogRemoteShkw">
                <el-option
                  v-for="item in dialogConfirmReceipt.wmslibraryposition"
                  :key="item.id"
                  :label="item.mc"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 7, offset: 0}" class="">
            <el-form-item prop="hppc" label="货品批次">
              <div class="s-content">{{formDialogConfirmReceipt.hppc}}</div>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 7, offset: 1}" class="">
            <el-form-item prop="scrq" label="生产日期">
              <div class="s-content">{{formatterTime(formDialogConfirmReceipt.scrq)}}</div>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 7, offset: 1}" class="">
            <el-form-item prop="xssl" label="现收数量">
              <el-input-number
                :min="0" :max="parseInt(dialogConfirmReceipt.row.OldNumber_xssl)"
                v-model="formDialogConfirmReceipt.xssl"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 7, offset: 0}" class="">
            <el-form-item prop="pssl" label="破损数量">
              <el-input
                type="text"
                v-model="formDialogConfirmReceipt.pssl"
                placeholder="破损数量"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 7, offset: 1}" class="">
            <el-form-item prop="jssl" label="拒收数量">
              <el-input
                type="text"
                v-model="formDialogConfirmReceipt.jssl"
                placeholder="拒收数量"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 7, offset: 1}" class="" v-if="parseInt(formDialogConfirmReceipt.jssl)">
            <el-form-item prop="jsyy" label="拒收原因">
              <el-input
                type="text"
                v-model="formDialogConfirmReceipt.jsyy"
                placeholder="拒收原因"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </s-form>
      <el-button slot="footer" @click="dialogConfirmReceiptSave">保存</el-button>
    </s-dialog>
  </div>
</template>
<script>
  import {AutoVue, GetLodop, FormatterTime, AutoPromise} from '~/plugins/Tools';
  import Mapan from '~/components/zxwmsPrint/mapan.vue';
  import Vue from 'vue';
  function __formDialogOperation () {
    return {
      mc: { value: '', rule: [ 'vNull' ] },
    };
  }
  function __formConfirmReceipt () {
    return {
      'czry': { value: '', rule: ['vNull'] },
      'scrq': { value: '', rule: [], type: 'Date' },
      'hppc': { value: '', rule: [] },
      'id': { value: '', rule: [] },
      'jssl': { value: '', rule: ['vNull', 'vNumber', 'vNumberZ'] },
      'jsyy': { value: '', rule: ['vNull'] },
      'pssl': { value: '', rule: ['vNull', 'vNumber', 'vNumberZ'] },
      'xssl': {
        value: '',
        rule: ['vNull', 'vNumber'] },
      'yqdmxid': { value: '', rule: [] },
      sssl: { value: '', rule: [], cRemarks: '' },
      kwmc: { value: '', rule: [], cRemarks: '' },
      'kwid': { value: '', rule: ['vNull__change'] },
      'hpid': { value: '', rule: [] },
      hpmc: { value: '', rule: [], cRemarks: '' },
      hpbh: { value: '', rule: [], cRemarks: '' },
      yqsl: { value: '', rule: [], cRemarks: '' },
    };
  }
  function __formDialogCancel () {
    return {
      'qxry': { value: '', rule: ['vNull'] },
      'qxyy': { value: '', rule: ['vNull'] },
    };
  }
  function __tableConfirm () {
    return {
      column: [
        { label: '货品编号',
          prop: 'hpbh',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '货品名称',
          prop: 'hpmc',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '收货库位',
          prop: 'kwmc',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '货品批次',
          prop: 'hppc',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '生产日期',
          prop: 'scrq',
          minWidth: '0px',
          formatter: (row, column) => {
            return FormatterTime(row[column.property || column], 3);
          },
          cRemarks: '',
          search: false },
        { label: '预期数量',
          prop: 'yqsl',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '现收货数',
          prop: 'xssl',
          minWidth: '0px',
          cRemarks: '',
          elInputNumber: {
            min: 1,
            controls: [false, true],
            max: 'xssl',
          },
          search: false },
        { label: '规格',
          prop: 'gg',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '操作人员',
          prop: 'czry',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '破损数量',
          prop: 'pssl',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '拒收数量',
          prop: 'jssl',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '拒收原因',
          prop: 'jsyy',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '实到数量',
          prop: 'sdsl',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: 'ASN状态',
          prop: 'show_asnzt',
          minWidth: '0px',
          cRemarks: '',
          search: false },
      ],
      url: '/wmsEstimatedArrivalOrderDetailed/seackASNSorting/',
      key: 'id',
      select: {
        kwid: [
          {
            key: '1',
            label: '1',
            value: '1',
          },
          {
            key: '2',
            label: '2',
            value: '2',
          },
        ],
      },
      tableColumn: 8,
      multiSelect: true,
    };
  }
  export default AutoVue({
    name: 'inOperation_ASNshouhuo-FEcarWms',
    head: {
      'title': 'ASN收货管理',
      'meta': [
        { 'hid': 'description', 'name': 'description', 'content': '乐速科技平台 ASN收货 查看ASN收货信息' },
      ],
    },
    store: ['USER'],
    data: {
      table: {
        column: [ { label: '仓库',
          prop: 'ckmc',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '货主',
          prop: 'hzmc',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: 'ASN编号',
          prop: 'asnbh',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: 'ASN类型',
          prop: 'show_asnlx',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: 'ASN状态',
          prop: 'show_asnzt',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '优先级',
          prop: 'show_yxj',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '预计到货时间',
          prop: 'yjdhsjq',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '创建时间',
          prop: 'cjsj',
          minWidth: '0px',
          type: 'DateRange',
          cRemarks: '',
          search: true },
        { label: '审核状态',
          prop: 'show_shzt',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '关联PO编号',
          prop: 'dycgdbh',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '制单人',
          prop: 'zdr',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '审核人',
          prop: 'ddshr',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '打印状态',
          prop: 'show_dyzt',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '打印时间',
          prop: 'dysj',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '收货完成时间',
          prop: 'shwcsjTime',
          minWidth: '0px',
          cRemarks: '',
          search: false },
        { label: '供应商名称',
          prop: 'gysmc',
          minWidth: '0px',
          cRemarks: '',
          search: true },
        { label: '码盘状态',
          prop: 'show_mpdyzt',
          minWidth: '0px',
          cRemarks: '0.未码盘 1.码盘',
          search: true } ],
        url: '/wmsEstimatedArrivalOrder/seachASNReceiving',
        key: 'id',
        tableColumn: 5,
        muti: false,
      },

      dialog: {
        title: '新增',
        row: {},
      },

      dialogConfirm: {
        title: '确认收货',
        size: 'full',
      },
      tableConfirm: __tableConfirm(),

      dialogConfirmReceipt: {
        title: '',
        wmslibraryposition: [],
        row: {},
      },
      formDialogConfirmReceipt: __formConfirmReceipt(),
      dialogOperation: {
        size: 'small',
        table: {},
      },
      formDialogOperation: __formDialogOperation(),

      dialogCancel: {
        size: 'small',
        ids: [],
      },
      formDialogCancel: __formDialogCancel(),
    },
    transition: 'slide-fade',
    methods: {
      tablePrint (row) {
        let tableRef = 'tableParts';

        let ids = [];
        if (row) {
          ids.push(row.id);
        } else {
          if (this[tableRef].multipleSelection.length < 1) {
            return this.$alert('您还未选择，请您至少选择一个！', '提示');
          }
          this[tableRef].multipleSelection.forEach(item => {
            ids.push(item.id);
          });
        }
        this.$confirm('您将打印码盘信息。', '确认打印？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        }).then(async () => {
          let LODOP = GetLodop();
          LODOP.PRINT_INIT('打印码盘信息');
          let {contentList, totals} = await this.post('/wmspalletsorting/baseDyid', {ids});
          // this.dialogPrint.visible = true;
          let time = this.formatterTime(new Date(), 6);
          let index = 1;
          for (let item of contentList) {
            let print = new Vue({
              el: document.createElement('div'),
              render (h) {
                return h(
                  'print', {
                    props: {
                      dialogPrint: this.dialogPrint,
                    },
                  }
                );
              },
              data: {
                dialogPrint: {
                  data: {
                    ...item,
                    scrq: FormatterTime(new Date(item.scrq)),
                    time,
                    index,
                    totals,
                  },
                },
              },
              components: {
                'print': Mapan,
              },
            });
            index++;
            let HTML = `<html>
${header()}
<body>
${print.$el.innerHTML}
</body>
</html>`;
            LODOP.NewPage();
            LODOP.ADD_PRINT_HTM(0, 0, '100mm', '80mm', HTML);
            LODOP.ADD_PRINT_BARCODE('11.38mm', '5.82mm', '52.92mm', '11.91mm', '128A', item.asnbh);
            LODOP.ADD_PRINT_BARCODE('52.12mm', '47.36mm', '45mm', '11.91mm', '128A', item.lpn);
          }
          LODOP.PREVIEW();
          // LODOP.PRINT_DESIGN();
        });
      },

      dialogConfirmInit () {
        this.tableClear('tableConfirm');
      },
      dialogConfirmOpen (row, title) {
        this.dialogConfirm.title = title;
        this.dialogConfirm.row = row;
        this.tableConfirm.url = '/wmsEstimatedArrivalOrderDetailed/seackASNSorting/' + row.id;
        this.tableWatch('tableConfirm');
        this.dialogConfirm.visible = true;
      },
      async tableConfirmSelectRemote (prop, query) {
        switch (prop) {
        case 'kwid':
          this.dialogRemoteShkw(query);
          break;
        }
      },
      async dialogConfirmSave () {
        if (this.tableConfirm.multipleSelection.length < 1) {
          return this.$alert('请至少选择一条数据！', '提示');
        } else {
          let success = true;
          let result = '';
          this.tableConfirm.multipleSelection.forEach((item, index) => {
            if (success && !(item.czry && item.xssl && item.kwid)) {
              success = false;
              result = `请仔细核对 第 ${(index + 1)} 条数据。 货品编号为 ： ${item.hpbh}`;
            }
          });
          if (success) {
            this.$confirm('您将确认收货。', '确认数据准确？', {
              confirmButtonText: '是',
              cancelButtonText: '否',
              type: 'warning',
            })
              .then(async _ => {
                let data = this.tableConfirm.multipleSelection;
                let step = [];
                data.forEach(item => {
                  let option = Object.assign({}, item);
                  delete option.lpn;
                  delete option.show_asnzt;
                  delete option.goodsBh;
                  delete option.goodsMc;
                  delete option.yqmpsl;
                  delete option.sssl;
                  delete option.ids;
                  delete option.shkw;
                  delete option.asnDetailedZt;
                  delete option.kwmc;
                  try {
                    option.scrq = (new Date(option.scrq)).getTime();
                  } catch (err) {
                    console.error('确认收货 中存在 数据异常的 scrq 不是标准的 时间格式！');
                  }
                  for (let index in option) {
                    if (option.hasOwnProperty(index)) {
                      if (!option[index]) {
                        delete option[index];
                      }
                    }
                  }
                  step.push(option);
                });
                try {
                  await this.post('/wmsreceiving/ASNreceiving/' + this.dialogConfirm.row.id, step);
                  this.tableWatch('table');
                  this.dialogConfirmInit();
                  this.dialogConfirm.visible = false;
                } catch (err) {
                  console.log(err);
                }
              })
              .catch(_ => {
              });
          } else {
            return this.$alert(result, '提示！');
          }
        }
      },

      dialogOperationInit () {
        this.formDialogOperation = {
          ...this.formDialogOperation,
          ...this.ObjectClone(__formDialogOperation()),
        };
        this.resetFields('formDialogOperation');
      },
      dialogOperationOpen (table) {
        this.dialogOperation.visible = true;
        this.dialogOperation.table = table;
      },
      dialogOperationSave () {
        let tableRef = this.dialogOperation.table;
        this.VALIDATE('formDialogOperation', option => {
          if (this[tableRef].multipleSelection.length < 1) {
            return this.$alert('您还未选择，请您至少选择一个！', '提示');
          }
          this[tableRef].multipleSelection.forEach(item => {
            item.czry = option.mc;
          });
          this.dialogOperationInit();
          this.dialogOperation.visible = false;
        });
      },

      dialogCancelInit () {
        this.dialogCancel.ids = [];
        this.formDialogCancel = {
          ...this.formDialogCancel,
          ...this.ObjectClone(__formDialogCancel()),
        };
        this.resetFields('formDialogCancel');
      },
      dialogCancelOpen (row) {
        let ids = [];
        if (row) {
          ids.push(row.id);
        } else {
          if (this.table.multipleSelection.length < 1) {
            return this.$alert('您还未选择，请您至少选择一个！', '提示');
          }
          this.table.multipleSelection.forEach(item => {
            ids.push(item.id);
          });
        }
        this.dialogCancel.visible = true;
        this.dialogCancel.ids = ids;
      },
      dialogCancelSave () {
        this.VALIDATE('formDialogCancel', async option => {
          await this.post('/wmsreceiving/rollBackASNReceiving', {
            ids: this.dialogCancel.ids,
            // ssyqdid: this.dialogCancel.ids[0],
            ...option,
          });
          this.tableWatch('table');
          this.dialogCancelInit();
          this.dialogCancel.visible = false;
        });
      },

      dialogConfirmReceiptInit () {
        this.formDialogConfirmReceipt = {
          ...this.formDialogConfirmReceipt,
          ...this.ObjectClone(__formConfirmReceipt()),
        };
        this.resetFields('formDialogConfirmReceipt');
      },
      async dialogConfirmReceiptOpen (row) {
        this.formDialogConfirmReceipt = {
          ...this.formDialogConfirmReceipt,
          ...this.ObjectClone(__formConfirmReceipt(), row),
        };
        await AutoPromise([
          async () => {
            await this.dialogRemoteShkw(row.kwmc);
          },
        ]);
        this.dialogConfirmReceipt.row = row;
        this.dialogConfirmReceipt.visible = true;
      },
      async dialogChangeShkw (id) {
        this.dialogConfirmReceipt.wmslibraryposition.forEach(item => {
          if (item.id === id) {
            this.formDialogConfirmReceipt.kwmc = item.mc;
          }
        });
      },
      async dialogRemoteShkw (query) {
        let {contentList} = await this.post('/wmslibraryposition/getZCLibrarysBymc', {mc: query, lx: '4'});
        this.dialogConfirmReceipt.wmslibraryposition = contentList;
        this.tableConfirm.select.kwid = contentList;
      },
      dialogConfirmReceiptSave () {
        this.VALIDATE('formDialogConfirmReceipt', async option => {
          for (let index in option) {
            if (option.hasOwnProperty(index)) {
              if (!option[index]) continue;
              this.dialogConfirmReceipt.row[index] = option[index];
            }
          }
          this.dialogConfirmReceiptInit();
          this.dialogConfirmReceipt.visible = false;
        });
      },
    },
    mounted: function () {
      this.tableWatch('table');
      console.log(this);
    },
  });
  function header () {
    return `
<head>
<style>
/* reset */
html {
  overflow: hidden;
}

body, div, dl, dt, dd, ul, ol, li, pre, code, form, fieldset, legend, textarea, blockquote, th, td, input, select, textarea, button {
  margin: 0;
  padding: 0
}

/* 重置fieldset（表单分组）、图片的边框为0*/
dl, ul, ol, menu, li {
  list-style: none
}

/* 重置类表前导符号为onne,menu在HTML5中有效 */
blockquote, q {
  quotes: none
}

/* 重置嵌套引用的引号类型 */
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none
}

/* 重置嵌套引用*/
input, select, textarea, button {
  vertical-align: middle
}

/* 重置表单控件垂直居中*/
button {
  border: 0 none;
  background-color: transparent;
  cursor: pointer
}

/* 重置表单button按钮效果 */
body {
  background: #fff
}

/* 重置body 页面背景为白色 */
body, th, td, input, select, textarea, button {
}

/*清除浮动--推荐使用*/
.clearfix:before, .clearfix:after {
  content: '';
  display: table;
}
.el-form-item:before, .el-form-item:after {
  content: '';
  display: table;
}

.el-form-item:after {
  clear: both;
}
.clearfix:after {
  clear: both;
}

.el-card {
    border: 1px solid #d1dbe5;
    border-radius: 4px;
    background-color: #fff;
    overflow: hidden;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
}

.el-card__header {
    padding: 18px 20px;
    border-bottom: 1px solid #d1dbe5;
    box-sizing: border-box;
}

.el-card__body {
    padding: 20px;
}

.el-row {
    position: relative;
    box-sizing: border-box;
}

.el-progress-bar__inner:after, .el-row:after, .el-row:before, .el-slider:after, .el-slider:before, .el-slider__button-wrapper:after, .el-upload-cover:after {
    content: "";
}

.el-row:after, .el-row:before {
    display: table;
}

  .mapanPrint .el-card__body{
    padding: 0 20px 20px;
  }
  .mapanPrint .title span{
    float: right;
  }
  .mapanbh{
    float: left;
    width: 50%;
  }
  .asnbh{
    height: 45px;
  }
  .mapanPrint .el-form-item{
    margin-bottom: 10px;
  }
.el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #48576a;
    line-height: 1;
    padding: 11px 12px 11px 0;
    box-sizing: border-box;
}


.el-form-item__content {
    line-height: 36px;
    position: relative;
    font-size: 14px;
    float: left;
}
.s-content{
  display:inline-block;
}
.title{
    float: left;
    width: 50%;
  }
.title .right{
    float: right;
  }
html{width:378px;height:302px;overflow:hidden;}
</style>
</head>
    `;
  }
</script>
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
</style>

<style lang="scss">
</style>
